﻿@model ProfitModel
@{
    ViewBag.Title = "Style";
}

<h2>Style</h2>

<p>The style binding adds or removes one or more style values to the associated DOM element. This is useful, for example, to highlight some value in red if it becomes negative, or to set the width of a bar to match a numerical value that changes.</p>
<p><a href="http://knockoutjs.com/documentation/style-binding.html" target="_blank">http://knockoutjs.com/documentation/style-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.STYLE_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.STYLE_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #1</h3>

<p>Enter profile: <input @Html.KoAttrValue(m => m.Profit, KoValueUpdate.AfterKeyDown)/></p>

<p>Profit (negative is red, more than 10 is green, less than -10 or more 100 is bold): <span @Html.KoAttrText(m => m.Profit).KoAttrStyle("color", m => m.Profit > 10 ? "green" : (m.Profit < 0 ? "red" : "black" )).KoAttrStyle("font-weight", m => m.Profit < -10 || m.Profit > 100 ? "bold" : "normal")></span></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.STYLE1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("Attr", "Attr", "Examples")</p>


@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)